<template>
  <view class="create-order">
    <!-- 头部及背景色 -->
    <backdrop />
    <navigation back backColor :title="edit ? '修改订单' : '确认下单'" />

    <view class="container">
      <view class="page-container safe-bottom">
        <!-- 匠人信息 -->
        <view class="craftsman-info flex flex-middle flex-between">
          <block v-if="pageInfo">
            <view class="left">
              <image
                class="avatar"
                mode="aspectFill"
                :src="pageInfo.ccCraftsmanDetailResponse.avatar"
              />
              <view class="content">
                <view class="name">
                  {{ pageInfo.ccCraftsmanDetailResponse.name }}
                  <text>
                    <block v-if="pageInfo.ccCraftsmanDetailResponse.avgRating">
                      {{ `${pageInfo.ccCraftsmanDetailResponse.avgRating}分` }}
                    </block>
                    <block v-else>暂无评分</block>
                  </text>
                </view>
                <view class="tips">
                  {{ `距您${pageInfo.ccCraftsmanDetailResponse.distance}km` }}
                  <block v-if="!!pageInfo.ccCraftsmanDetailResponse.dictionary">
                    {{ `丨免出行费` }}
                  </block>
                </view>
              </view>
            </view>
            <view class="flex flex-middle">
              <view
                class="icon-view flex flex-middle flex-center"
                @click="callPhone"
              >
                <u-icon name="phone-fill" size="20" color="#31BC4E" />
              </view>
              <view
                class="icon-view flex flex-middle flex-center"
                @click="sendMsg"
              >
                <u-icon name="chat-fill" size="20" color="#31BC4E" />
              </view>
            </view>
          </block>
        </view>
        <!-- 服务信息 -->
        <view class="service-info">
          <block v-if="pageInfo">
            <view class="name flex flex-middle flex-between">
              <view class="flex-1 text-line">
                {{ pageInfo.informationResponse.storeName }}
              </view>
              <text class="color1">
                {{
                  `¥${pageInfo.informationResponse.price}/${pageInfo.informationResponse.serviceTime}分钟`
                }}
              </text>
            </view>
            <view class="tips text-line color2">
              {{ pageInfo.informationResponse.serviceName }}
            </view>
          </block>
        </view>
        <!-- 地址信息 -->
        <view
          class="address-info form-line flex flex-middle flex-between"
          @click="toAddress"
        >
          <view class="content flex-1 text-line">
            <view class="title">基本信息</view>
            <view class="name text-line" :class="{ color2: !addressInfo }">
              <block v-if="!addressInfo"> 选择您的地址 </block>
              <block v-else>
                {{
                  `${addressInfo.realName} ${
                    addressInfo.sex == 1 ? "先生" : "女士"
                  } ${phoneStr}`
                }}
              </block>
            </view>
            <view
              class="tips text-line color1"
              :class="{ color1: !addressInfo, color2: !!addressInfo }"
            >
              <block v-if="!addressInfo">
                请确保您的地址正确，手机保持畅通哦～
              </block>
              <block v-else>
                {{ `${addressInfo.streetCommunity}${addressInfo.detail}` }}
              </block>
            </view>
          </view>
          <u-icon name="arrow-right" size="16" color="#333" />
        </view>
        <!-- 服务时间 -->
        <view class="time-info color-2 form-line flex flex-middle flex-between">
          <view class="content"> 选择服务时间 </view>
          <u-icon name="arrow-right" size="16" color="#333" />
        </view>
        <!-- 备注 -->
        <view
          class="notes-info form-line flex flex-middle flex-between"
          @click="toNotes"
        >
          <view class="content"> 备注 </view>
          <view class="right flex flex-middle flex-right">
            <text class="text-line" :class="{ color1: !notes }">
              <block v-if="notes">
                {{ notes }}
              </block>
              <block class="color1" v-else> 如有特殊情况，请您备注 </block>
            </text>
            <u-icon name="arrow-right" size="16" color="#333" />
          </view>
        </view>
        <!-- 支付方式 -->
        <view class="pay-info form-line flex flex-middle flex-between">
          <view class="content"> 支付方式 </view>
          <view class="right flex flex-middle">
            <image
              class="pay-logo"
              src="@/static/image/common/test.png"
              mode="aspectFill"
            />
            <text>微信支付</text>
            <u-icon name="arrow-right" size="16" color="#333" />
          </view>
        </view>
        <!-- 优惠券 -->
        <view class="coupon-info form-line flex flex-middle flex-between">
          <view class="content"> 优惠券 </view>
          <view class="right flex flex-middle">
            <text>- ￥10.0</text>
            <u-icon name="arrow-right" size="16" color="#333" />
          </view>
        </view>
        <!-- 预估出行费用 -->
        <view class="price-info form-line flex flex-middle flex-between">
          <view class="content"> 预估出行费用 </view>
          <text class="color1">本单免出行费</text>
        </view>

        <!-- 预约须知 -->
        <view class="rules">
          <view class="title">预约须知</view>
          <view class="content">
            <view class="line"> · 请至少提前30分钟与匠人预约时间 </view>
            <view class="line"> · 同一账号只能用一张优惠券 </view>
            <view class="line"> · 成功下单后优惠券将被使用 </view>
            <view class="line">
              ·
              所有费用，均从线上支付，若存在匠人向您私下索要财物的行为，欢迎举报，举报有奖！
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-view safe-bottom">
      <view class="page-container">
        <view class="bottom-container flex flex-between flex-middle">
          <view class="left color1 flex flex-middle">
            <view class="price flex flex-middle">
              合计：
              <text class="icons"> ¥ </text>
              <text> 288.0 </text>
            </view>
            <view class="coupon flex flex-middle">
              已优惠
              <text>¥10.0</text>
            </view>
          </view>
          <view class="right flex flex-middle flex-center"> 去支付 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getCreatePreOrderDetail } from "@/api/order";

export default {
  data() {
    return {
      id: null,
      edit: false,
      pageInfo: null,
      useCouponId: null,
    };
  },
  computed: {
    ...mapGetters(["notes", "currentAddress"]),
    phoneStr() {
      const left = this.currentAddress.phone.slice(0, 3);
      const right = this.currentAddress.phone.slice(7, 11);
      return `${left}****${right}`;
    },
    addressInfo: {
      get() {
        let obj = null;
        if (this.currentAddress?.id) obj = this.currentAddress;
        return obj;
      },
      set() {},
    },
  },
  onLoad({ id, edit }) {
    this.$store.commit("SET_NOTES", "");
    this.id = id;
    if (edit) this.edit = !!edit;
    if (!this.edit) this.getCreatePreOrderDetail();
  },
  methods: {
    async getCreatePreOrderDetail() {
      this.$loading();
      const { data } = await getCreatePreOrderDetail({
        preOrderNo: this.id,
      });
      this.$loading.close();
      this.pageInfo = data;
      this.useCouponId = data?.userCouponId;
    },
    toAddress() {
      this.$navigateTo("/pages/address/index?order=1");
    },
    toNotes() {
      this.$navigateTo("/pages/order/notes");
    },
    sendMsg() {
      this.$dialog({
        content: "即将开放，敬请期待！",
      });
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.pageInfo.ccCraftsmanDetailResponse.phone,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.color1 {
  color: #979797;
}

.color2 {
  color: #666;
}

.create-order {
  color: #333;
}

.bottom-view {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 64px;
  background: #fff;
  box-shadow: 0px 0px 8px 0px rgba(218, 218, 218, 0.5);

  .left {
    font-weight: bold;

    .coupon {
      margin-left: 8px;
      font-size: 13px;

      text {
        font-size: 13px !important;
        margin-left: 2px;
      }
    }

    text {
      color: #ea473f;
      font-size: 17px;
      font-weight: normal;
    }

    .icons {
      font-size: 12px;
      margin-right: 2px;
      margin-bottom: -4px;
    }
  }

  .right {
    box-shadow: 0px 0px 8px 0px rgba(218, 218, 218, 0.5);
    width: 90px;
    height: 34px;
    background: #232323;
    border-radius: 17px;
    text-shadow: 0px 0px 8px rgba(218, 218, 218, 0.5);
    color: #fff;
    font-weight: bold;
  }

  .bottom-container {
    padding: 0 16px;
    height: 64px;
  }
}

.rules {
  padding: 16px 0;

  .line {
    color: #999;
    margin-top: 6px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
  }
}

.form-line {
  border-bottom: 1px solid #ecedec;
  height: 50px;

  .content {
    height: 100%;
  }
}

.price-info {
  line-height: 50px;

  text {
    font-size: 12px;
  }
}

.coupon-info {
  line-height: 50px;

  .right {
    text {
      color: #ea473f;
      margin-right: 6px;
    }
  }
}

.pay-info {
  line-height: 50px;

  .pay-logo {
    width: 22px;
    height: 22px;
  }

  text {
    margin: 0 6px;
  }
}

.notes-info {
  line-height: 50px;

  .right {
    width: 60%;

    text {
      font-size: 12px;
      margin-right: 6px;
      display: inline-block;
    }
  }
}

.time-info {
  line-height: 50px;
}

.address-info {
  height: 98px;

  .tips {
    font-size: 12px;
    margin-top: 2px;
  }

  .name {
    margin-top: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    padding-top: 14px;
  }
}

.service-info {
  height: 66px;
  border-bottom: 1px solid #ecedec;

  .tips {
    font-size: 12px;
    margin-top: 2px;
  }

  .name {
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px;

    text {
      font-weight: normal;
      font-size: 12px;
    }
  }
}

.craftsman-info {
  height: 68px;
  border-bottom: 1px solid #ecedec;

  .icon-view {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dcfee4;
    margin-left: 6px;
  }

  .left {
    overflow: hidden;

    .content {
      padding-left: 50px;

      .tips {
        color: #9d9d9d;
        font-size: 11px;
      }

      .name {
        font-weight: bold;
        padding-top: 4px;

        text {
          color: #fa6400;
          font-size: 13px;
          margin-left: 6px;
        }
      }
    }

    .avatar {
      float: left;
      width: 42px;
      height: 42px;
      border-radius: 50%;
    }
  }
}

.container {
  position: relative;
  padding: 0 16px 64px;
  color: #232323;
}
</style>